<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>远程抄表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
	<!-- <script type="text/javascript" src="jiaoben2018/jquery.downCount.js"></script> -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">

    <link href="assets/js/footable/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable.standalone.css" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable-demos.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">
    <script type="text/javascript">
    // 2014-04-23 18:55:49:123
    	function timeToTimeTimestamp(date){
    		return Date.parse(date);
    	}
    </script>
	<script type="text/javascript">
	function parseTime(count) {
		var second = count % 60;
		var min = Math.floor(count/60);
		var minute = min % 60;
		var ho = Math.floor(min/60);
		var hour = ho % (24);
		var day = Math.floor(ho/24);
		return day+"天"+hour+"小时"+minute+"分钟"+second+"秒";
	}
	</script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
    <style type="text/css">
ul.countdown {
	list-style: none;
	/* margin: 75px 0; */
	padding: 0;
	display: block;
	text-align: center;
}
ul.countdown li {
	display: inline-block;
}
ul.countdown li span {
	font-size: 25px;
	font-weight: 300;
	line-height: 80px;
}
ul.countdown li.seperator {
	font-size: 25px;
	line-height: 78px;
	vertical-align: top;
}
#sp_title{
	line-height: 82px ;
	font-family: "Open Sans", Arial, sans-serif!important;
}
ul.countdown li p {
	color: #a7abb1;
	font-size: 14px;
}
a {
	color: #76949F;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.source {
	width: 405px;
	margin: 0 auto;
	background: #4f5861;
	color: #a7abb1;
	font-weight: bold;
	display: block;
	white-space: pre;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.btn {
	background: #f56c4c;
	margin: 40px auto;
	padding: 12px;
	display: block;
	width: 100px;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.btn:hover {
	text-decoration: none;
	opacity: .7;
}
</style>
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse" >
                <div id="nt-title-container" class="navbar-left running-text visible-lg" style="margin-left:250px;">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>

                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                </div>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
         <!-- <h1>&nbsp;&nbsp;&nbsp;微分电子</h1> -->
         <img alt="" src="microsec/logo.png" style="margin-top: 15px;">
        </div>

        <a id="toggle" style="display:none">
            <span class="entypo-menu"></span>
        </a>

        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">

                        <li>
                            <a class="tooltip-tip ajax-load" href="index1.html" title="Blog App">
                                <i class="icon-document-edit"></i>
                                <span>温度显示</span>
                            </a>
                        </li>
                        
                        <li>
                            <a class="tooltip-tip ajax-load" href="index2.html" title="Social">
                                <i class="icon-feed"></i>
                                <span>报警控制</span>
                            </a>
                        </li>
                        
                        <li>
                            <a class="tooltip-tip ajax-load" href="index3.html" title="Media">
                                <i class="icon-camera"></i>
                                <span>远程抄表</span>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->

    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">

            <div class="content-wrap">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="nest" id="FilteringClose">
                            <div class="title-alt">
								<ul class="countdown">
									<li class="seperator" id="sp_title">距离下次抄表&nbsp;<span id="second_span"></span></li>
									<!-- <li>
										<span class="days">00</span><span class="days_ref">天</span>
									</li>
									<li class="seperator">&nbsp;</li>
									<li>
										<span class="hours">00</span><span class="hours_ref">小时</span>
									</li>
									<li class="seperator">:</li>
									<li>
										<span class="minutes">00</span><span class="minutes_ref">分钟</span>
									</li>
									<li class="seperator">:</li>
									<li>
										<span class="seconds">00</span>
										<span class="seconds_ref">秒</span>
									</li> -->
								</ul>
                            </div>

                            <div class="body-nest" id="Filtering">

                                <table id="footable-res2" class="demo" data-filter="#filter" data-filter-text-only="true">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true">日期</th>
                                            <th>用户</th>
                                            <th data-hide="phone,tablet">备注</th>
                                            <th data-hide="phone,tablet">电话</th>
                                            <th data-hide="phone">电表读数 </th>
                                        </tr>
                                    </thead>
                                    <tbody id="electricity_meter_tbody">
                                        <tr>
                                            <td>22 Jun 1972</td>
                                            <td><a href="#">Boudreaux</a>
                                            </td>
                                            <td>Traffic Court Referee</td>
                                            <td>22 Jun 1972</td>
                                            <td>Suspended</td>
                                        </tr>
                                        <tr>
                                            <td>3 Oct 1981</td>
                                            <td>Woldt</td>
                                            <td><a href="#">Airline Transport Pilot</a>
                                            </td>
                                            <td>3 Oct 1981</td>
                                            <td>Suspended</td>
                                        </tr>
                                        <tr>
                                            <td>19 Apr 1969</td>
                                            <td>Leonardo</td>
                                            <td>Business Services Sales Representative</td>
                                            <td>19 Apr 1969</td>
                                            <td>Suspended</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/toggle_close.js"></script>
    <script src="assets/js/footable/js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() {
        $('.footable-res').footable();
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $('#footable-res2').footable().bind('footable_filtering', function(e) {
            var selected = $('.filter-status').find(':selected').text();
            if (selected && selected.length > 0) {
                e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                e.clear = !e.filter;
            }
        });

        $('.clear-filter').click(function(e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
        });

        $('.filter-status').change(function(e) {
            e.preventDefault();
            $('table.demo').trigger('footable_filter', {
                filter: $('#filter').val()
            });
        });

        $('.filter-api').click(function(e) {
            e.preventDefault();

            //get the footable filter object
            var footableFilter = $('table').data('footable-filter');

            alert('about to filter table by "tech"');
            //filter by 'tech'
            footableFilter.filter('tech');

            //clear the filter
            if (confirm('clear filter now?')) {
                footableFilter.clearFilter();
            }
        });
    });
    </script>
    <script type="text/javascript"></script>
	<script class="source" type="text/javascript">
		var now = new Date();
		var timestamp = Date.parse(now);
		var year = now.getFullYear(); 
		var month = now.getMonth()+2;
		var count =  Math.floor((timeToTimeTimestamp(new Date(year+"-"+month+"-01 00:00:01")) - timestamp)/1000);
		setInterval(function() {
			count --;
            $("#second_span").text(parseTime(count));
            if(count == 0){
            	count = 2629800;
            	$.ajax({
            		type:"POST",
            		data:{data:"meterData"},
    				url:"/iotDemo/DataLoad",
    				success:function(value){
    					console.info(value);
    				},
    				error:function(){
    					console.info("!!!!!!!!!!!");
    				}
            	})
            }
        }, 1000);
	</script>
</body>

</html>
